<template>
	<view class="pages bg-fff">
		<!-- <up-tabs :list="tabsArr" :current="tabCurrent" lineColor="#007235" keyName="name" @click="bindNav"></up-tabs> -->

		<view class="historyPage">
			<block v-if="tabsArr[tabCurrent].param === 'new'">
                <block v-for="item in tabsArr[tabCurrent].products" :key="item.id">
                    <view class="prodItem">
                        <product-item :product="item">
                            <view class="cancelBtnBox flex">
                                <view class="subscribeBtn font11">
                                    <view class="btn bg-F8EFD6 col-theme" @click.stop="unsubscribe(item)" v-if="item.subscribe">取消订阅</view>
                                    <view class="btn bg-gray col-grey" v-else>已取消订阅</view>
                                </view>
                            </view>
                        </product-item>
                    </view>
                </block>
			</block>
		</view>
        <up-loadmore :status="tabsArr[tabCurrent].loadingType" v-if="tabsArr[tabCurrent].products.length > 0" />
        <up-empty text="暂无数据" marginTop="100" mode="list" v-if="tabsArr[tabCurrent].products.length === 0 && tabsArr[tabCurrent].loadingType === 'nomore'"></up-empty>
		<up-gap :height="40" />
	</view>
</template>
<script>
    import { mapState } from 'pinia';
    import { useConfigStore } from '@/store/index';
	import { unSubscribe, unSubscribeSecond } from "@/common/api";
    import { collectHouseType } from '@/common/api/house';
    // import { collectViewAPI } from "@/common/api/fans-house";
    import { loadSubscribeProducts } from '@/common/api/my';
	export default {
		data() {
			return {
				tabCurrent: 0,
				tabsArr: [{
                    name: '新房',
                    next: '',
                    param: 'new',
                    loadingType: 'loadmore',
                    products: [],
                    url: '/product/mall/v6/subscribe'
                }]
			}
		},
		onPullDownRefresh() {
			this.reset();
			this.loadData()
		},
		onReachBottom(){
			this.loadData()
		},
        computed:{
        	...mapState(useConfigStore, ['puid'])
        },
		onLoad() {
			uni.$check_and_login(this.loadData);
		},
		methods: {
            //重置数据
			reset(){
                this.tabsArr.forEach(item => {
                    item.products = [];
                    item.next = "";
                    item.loadingType = "loadmore"
                })
			},
            
			//加载更多数据
			async loadData(){
                const that = this;
                
				let navItem = this.tabsArr[this.tabCurrent];
				if(navItem.loadingType === 'loading' || navItem.loadingType === 'nomore') return;
                
				navItem.loadingType = 'loading';
                
                let url = (navItem.next === '' || navItem.products.length === 0) ? navItem.url : navItem.next;
                
                uni.showLoading({
                	title: '数据加载中',
                	mask: true
                })
                try{
                    const { status, detail } = await loadSubscribeProducts(url);
                    if(status !== 0) {
                        uni.$u.toast(detail);
                        return;
                    }
                    let { results, next } = detail;
                    if(results.length > 0) {
                        results.forEach(item => {
                            navItem.products.push({
                                ...item,
                                    subscribe: true
                            })
                        })
                    }
                    navItem.next = next;
                    navItem.loadingType = next ? 'loadmore':'nomore';
                    uni.stopPullDownRefresh();
                    uni.hideLoading()
                }catch(err){
                    uni.stopPullDownRefresh();
                    uni.hideLoading()
                }
			},
			
			//跳转二手房详情
			navTo(info){
				uni.navigateTo({
					url: `/pages/menus/assistant-house/detail?productId=${info.product_id}&puid=${this.puid}&title=${info.title}`
				})
			},
            
			//取消新房订阅
			unsubscribe(info){
				unSubscribe(info.id).then(res => {
					info.subscribe = false;
				}).catch(err => {
					uni.$u.toast(err)
				})
			},
			
			//取消二手房订阅
			unsubSecond(info){
				unSubscribeSecond(info.product_id).then(res => {
					if(res.status == 0){
						info.subscribe = false;
					}
				}).catch(err => {
					uni.$u.toast(err)
				})
			},
            
            //取消收藏粉丝房源
            // unSubFans(row) {
            //     collectViewAPI({
            //         productId: row.id,
            //         action: 1
            //     }).then(res => {
            //         row.subscribe = !row.subscribe;
            //         uni.$u.toast('操作成功');
            //     }).catch(err => {
            //         uni.$u.toast(err);
            //     })
            // },
            
            //取消收藏户型评测
            unsubevaluation(row) {
                collectHouseType({
                    id: row.id,
                    action: 1
                }).then(res => {
                    row.subscribe = !row.subscribe;
                    uni.$u.toast('操作成功');
                }).catch(err => {
                    uni.$u.toast(err)
                })
            },
            
			//点击tab
			bindNav({index}) {
                if(this.tabCurrent === index) return;
                this.tabCurrent = index
                this.loadData();
			}
		}
	}
</script>

<style lang="scss">
	.pages{
        min-height: 100vh;
        overflow: hidden;
	}
	.historyPage{
		padding: 0rpx 30rpx;
        .prodItem{
            border-bottom: 1rpx solid rgba(0,0,0,.04);
            margin-top: 20rpx;
            position: relative;
            padding-bottom: 20rpx;
            &:last-child{
                border: none;
            }
            .cancelBtnBox{
                margin-top: 20rpx;
                justify-content: flex-end;
                .subscribeBtn{
                    .btn{
                        border-radius: 6rpx;
                        padding: 8rpx 20rpx;
                    }
                }
            }
        }
	}
</style>
